<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>{title}</title>

    <!-- Bootstrap core CSS -->
    <link href="<?=base_url('utils/css/bootstrap.css') ?>" rel="stylesheet">
    <link rel="stylesheet" href="<?=base_url('utils/css/customize.css') ?>">
    <link rel="stylesheet" href="<?=base_url('utils/css/codrops.css') ?>">
    <link rel="stylesheet" href="<?=base_url('utils/css/font-awesome.css') ?>">
    <link rel="stylesheet" href="<?=base_url('utils/css/galleria.classic.css') ?>">
    <link rel="stylesheet" href="<?=base_url('utils/css/carousel.css') ?>">
    <script src="<?=base_url('utils/js/modernizr.custom.js') ?>"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="<?=site_url('bootstrap3/css/bootstrap-dialog.min.css') ?>" rel="stylesheet" type="text/css" />
    <script src="<?=site_url('bootstrap3/js/bootstrap-dialog.min.js') ?>"></script>
    <script>
        $(document).ready(function(){         
            $("#size-select li").click(function() {
                var value = this.id;                
                
                if(value != '')
                    $("#order").val(1);
                
                if(value == 'xs')
                {
                    $("#xs-size").val(1);    
                    //alert('Size ' + value + ' được chọn !');
                }
                if(value == 's')    
                {
                    $("#s-size").val(1);
                    //alert('Size ' + value + ' được chọn !');
                }
                if(value == 'm')
                {
                    $("#m-size").val(1);
                    //alert('Size ' + value + ' được chọn !');
                }
                if(value == 'l')
                {
                    $("#l-size").val(1);
                    //alert('Size ' + value + ' được chọn !');
                }
                if(value == 'xl')
                {
                    $('#xl-size').val(1);
                    //alert('Size ' + value + ' được chọn !');
                }
                if(value == 'xxl')
                {
                    $('#xxl-size').val(1);
                    //alert('Size ' + value + ' được chọn !');
                }
                if(value == 'xxxl')
                {
                    $('#xxxl-size').val(1);
                    //alert('Size ' + value + ' được chọn !');
                }
            });

            // button add-to-cart pressed
            $("#item-btn a").click(function() {
                var value = $("#order").val();
                var myClass = $(this).attr("class");     

                // sản phẩm
                var product_title = $("#product_title").val();           

                var id = $("#product-id").val();
                var xs = $("#xs-size").val();
                var s = $("#s-size").val();
                var m = $("#m-size").val();
                var l = $("#l-size").val();
                var xl = $("#xl-size").val();
                var xxl = $("#xxl-size").val();
                var xxxl = $("#xxxl-size").val();                

                if(value == '')
                {
                    alert('Vui lòng chọn size');
                    return false;
                }
                else
                {                                        
                    $.post("<?=site_url('home/addCart') ?>",
                    {
                      id: id,
                      xs: xs,
                      s : s,
                      m : m,
                      l : l,
                      xl: xl,
                      xxl: xxl,
                      xxxl: xxxl,
                    },
                    function(data,status){                        
                      //
                      BootstrapDialog.show({
                            title: 'Giỏ hàng',
                            message: 'Đặt hàng '+product_title+' thành công !',
                            buttons: [{
                                label: 'Tiếp tục mua hàng',
                                action: function(dialogItself){
                                    dialogItself.close();
                                }
                            }, {
                                label: 'Thanh toán',
                                cssClass: 'btn-primary',
                                action: function(){
                                    window.location.href= "<?=site_url('home/info') ?>"
                                }
                            },]
                        }); 
                      //
                      $("#count").html(data);
                    });                                              
                    
                    if(myClass == 'red-btn')
                    {
                       return true;
                    }   
                    else
                    {
                        return false;                  
                    }
                }
            });            
        });
    </script>
</head>

<body>
<!-- <div id="top-header">
    Tất cả áo thun vietnam t shirt project vận chuyển miễn phí trên toàn quốc
</div> -->    
    <header id="header" class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="row">
                <div class="navbar-header col-lg-4 col-md-4 col-sm-4">           
                    <a class="navbar-brand" href="{homepage}">
                        <img src="<?=base_url('utils/img/Logo-VN-T-shirt-Project-final.png') ?>" class="img-responsive"alt="">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <nav id="navbar" class="navbar-collapse col-lg-8 col-md-8 col-sm-8">
                    <ul class="nav navbar-right">
                        <li>
                            <a href="{homepage}">Shop áo thun</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Giới thiệu <b class="caret"></b></a>
                              <ul class="dropdown-menu sub-menu">
                                    <li><a href="<?=site_url('home/news/cac-thuong-hieu') ?>">Các thương hiệu</a></li>
                                    <li><a href="<?=site_url('home/news/ban-si-cho-nha-phan-phoi') ?>">Bán sỉ cho nhà phân phối</a></li>
                                    <li><a href="<?=site_url('home/news/hop-tac-thuong-hieu') ?>">Hợp tác thương hiệu</a></li>
                              </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nhà thiết kế<b class="caret"></b></a>
                              <ul class="dropdown-menu sub-menu">
                                    <li><a href="<?=site_url('home/news/mua-mau-thiet-ke') ?>">Mua mẫu thiết kế</a></li>
                                    <li><a href="<?=site_url('home/news/dang-ky-cong-tac') ?>">Đăng ký cộng tác</a></li>
                                    <li><a href="<?=site_url('home/news/design-contest-2014') ?>">Design Contest 2014</a></li>
                              </ul>
                        </li>
                         <li>
                            <a href="<?=site_url('home/news/dia-chi-cua-hang') ?>">Địa chỉ cửa hàng</a>
                        </li>
                    </ul>
                <div id="mini-nav" class="row">
                    <ul>
                         <li id="cart">
                            <a href="{addCart}">
                                <i class="fa fa-shopping-cart"></i>
                                <span id="count">
                                    {total_cart}
                                </span>
                            </a>
                        </li>
                        <li id="sb" class="sb-search">
                            <form>
                                <input class="sb-search-input" placeholder="Tìm kiếm" type="search" name="search" value="" id="search">
                                <input class="sb-search-submit" type="submit" value="">
                                <span class="sb-icon-search"></span>
                            </form>                        
                        </li>
                    </ul>
                </div>
                </nav>

            </div><!-- .row -->
            <!-- /.navbar-collapse -->
        </div>
    </header>
        <div class="container" id="body">
        <div class="row">
            <div id="breadcrums" class="col-lg-12">
                <ol class="breadcrumb">
                    <li><a href="{homepage}">Trang chủ</a></li>
                    <li><a href="">Thời trang</a></li>
                    <li class="active"><a href="">Nam</a></li>
                </ol>
                <h3>{title}</h3>    
            </div>
        </div>
        <input type="hidden" id="product_title" name="" value="{title}">
        <div class="row">
            <div id="tab-product" class="col-lg-12">
                <ul id="tab">
                    <li class="active"><a href="">Nam</a></li>
                    <li><a href="">Nữ</a></li>
                    <li><a href="">Túi xách</a></li>
                    <li><a href="">Case</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div id="wrapper-product" class="col-md-8 col-lg-8 col-sm-8">
                <article id="img-product">
                  <div id="galleria">
                  {product_images}
                      <a href="{image1}"><img src="{image1}" alt=""></a>                      
                  {/product_images}
                  </div>
                </article>
                <div id="comments">
                   <div id="title-comments">
                       <h4>Để lại bình luận</h4>
                   </div>
                   <!-- Facebook chat -->
                   <iframe src="//www.facebook.com/plugins/like.php?href=http://example.com/comments&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=421836474553559" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>                    
                        <div id="fb-root"></div>
                            <script>(function(d, s, id) {
                              var js, fjs = d.getElementsByTagName(s)[0];
                              if (d.getElementById(id)) return;
                              js = d.createElement(s); js.id = id;
                              js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1&appId=421836474553559";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk'));</script>

                        <div class="fb-comments" data-href="http://example.com/comments" data-numposts="5"></div> 
                </div>
            </div><!-- #wrapper-product -->
            <div id="sidebar-product" class="col-md-4 col-lg-4 col-sm-4">
                <section id="item-group">
                    <h4>Áo thun nam</h4>
                    <div id="cost">
                        <span class="price">{pricek}</span> <span>Freeship toàn quốc</span>
                    </div>
                    <div id="select">
                    	<?php if($emptyproducts == 'no'): ?>
                        <p>Chọn màu và size của bạn</p>
                        <div id="color-select">
                            <ul class="color">
                            {list_products}
                                <li>
                                    <a href="{lproduct_link}">
                                        <em></em>
                                         <span style="background-color:{lcolor};"></span>
                                    </a>
                                </li>                                
                            {/list_products}
                            </ul>
                        </div>
                        <?php else: echo '<p>Chọn size của bạn</p>'; endif; ?>
                        <div id="size-select">
                            <ul id="select">
                                {xs}{s}{m}{l}{xl}{xxl}{xxxl}                            
                            </ul>
                             <div class="clearfix"></div>
                             <input id="product-id" type="hidden" value="{id}">
                             <input id="order" type="hidden" value="" />                              
                             <input id="xs-size" type="hidden" value="" /> 
                             <input id="s-size" type="hidden" value="" /> 
                             <input id="m-size" type="hidden" value="" /> 
                             <input id="l-size" type="hidden" value="" /> 
                             <input id="xl-size" type="hidden" value="" /> 
                             <input id="xxl-size" type="hidden" value="" /> 
                             <input id="xxxl-size" type="hidden" value="" /> 
                        </div><!-- #size select -->                 
                    </div><!-- #select -->
                </section><!-- #item-group -->
               
                <?php if(empty($na)): ?>
                <section id="item-btn">
                   <a href="{add_to_cart}"><button class="ghost-btn-white">Mua ngay</button></a>
                   <!-- <a href="<?=site_url('home/info') ?>" class="red-btn">Mua ngay</a> -->
                </section>
                <?php else: echo 'Sản phẩm hết hàng'; endif; ?>
                <section id="share-btn">
                    
                </section>
                <section id="designer-infor">
                    <div class="title-section">
                        <h4>Thông tin Designer</h4>
                    </div>
                    <div class="nomargin row">
                        <img src="{designer_img}" alt="{designer_img}" class="col-md-4 img-circle">
                        <div class="col-md-8" id="designer-name">
                            <p>
                                <b>{designer}</b>
                                <br>
                                {designer_desc} <br>
                                <a href="">{designer_website}</a>    
                            </p>
                        </div>
                    </div>
                </section>
                <section id="about-design">
                    <div class="title-section">
                        <h4>Về thiết kế</h4>
                    </div>
                    <div class="nomargin row">
                        <img src="{article_image}" alt="" class="img-responsive">
                    </div>
                    <p>
                        <b class="red">{article_title}</b><br>
                        {article_detail}
                    </p>
                    <div id="tag" class="nomargin row">
                        <button class="gray-btn">T-quotes</button>
                        <button class="gray-btn">Steve Jobs</button>
                        <button class="gray-btn">Cứ đói đi</button>
                         <button class="gray-btn">Cứ khát đi</button>
                    </div>
                </section>
            </div>
        </div>
        <div class="row">
            <div id="related">
                <div id="title-related">
                    <h4>Có thể bạn sẽ thích</h4>
                </div>
                <ul class="style1 row">
                {related_products}
                    <li class="col-md-3">
                        <figure>
                            <img src="{rimage}" alt="" class="img-responsive">
                            <figcaption>
                                <h3>{rproduct}</h3>
                                <hr>
                                <span>thiết kế bởi <a href="">{rdesigner}</a></span>
                                <a href="{rproduct_link}"><button class="ghost-btn">Xem chi tiết</button></a>
                            </figcaption>
                        </figure>
                    </li>  
                {/related_products}                  
                </ul>
            </div><!-- related -->
        </div><!-- row -->
        <div id="logo-slider-wraper" class="row">
            <div class="list_carousel">
                <ul id="foo">
                    <li><img src="<?=base_url("utils/slide/logo-fresh-monday-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-monkey-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-cat-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-sleeping-owl-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-hanoi-36-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-t-shirt-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-beyond-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-new-saigon-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-RSS-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-heli-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-always-available-home1.jpg") ?>" /></li>
                    <li><img src="<?=base_url("utils/slide/logo-linh-vat-dat-viet-home1.jpg") ?>" /></li>                    
                </ul>    
                <!--
                <div class="clearfix"></div>
                <a id="prev" class="prev1" href="#">&lt;</a>
                <a id="next" class="next1" href="#">&gt;</a>
                <div id="pager2" class="pager"></div>
                -->
            </div><!-- .list_carousel -->
        </div><!-- logo-slider-wraper -->
        <div class="row" id="footer-btn">
            <div  class="col-sm-4">
                <p class="text-center">
                    <a href="">
                        <img src="<?=base_url('utils/img/mauthietke.png') ?>" alt="">
                    </a>
                </p>
            </div>
            <div class="col-sm-4">
                <p class="text-center">
                    <a href="">
                        <img src="<?=base_url('utils/img/nhaphanphoi.png') ?>" alt="">
                    </a>
                </p>
            </div>
            <div class="col-sm-4">
                <p class="text-center">
                    <a href="">
                        <img src="<?=base_url('utils/img/cacthuonghieu.png') ?>" alt="">
                    </a>
                </p>
            </div>
        </div>
         <footer id="colophon" role="contentinfo" class="row">                                           
            <div id="site-generator-wrapper">
                <section id="site-generator" class="clearfix">
                    <a class="social" href="http://www.facebook.com/VietnamTShirtProject" target="_blank" rel="nofollow">
                    <span class="facebook social-icon"></span>
                    </a>                             
                    <p>DỰ ÁN VIETNAM T-SHIRT PROJECT LÀ DỰ ÁN QUY TỤ NGUỒN LỰC THIẾT KẾ, SẢN XUẤT, PHÂN PHỐI CỦA CỘNG ĐỒNG.</p>
                    <p>ĐƯỢC ĐIỀU HÀNH BỞI LAICEPS CORPORATION, BẢN QUYỀN MẪU THIẾT KẾ THUỘC VỀ NHÀ THIẾT KẾ.</p>
                    <p>COPYRIGHT 2013. ALL RIGHTS RESERVED</p>                              
                    <div id="sub-footer-info">
                      </div>
                </section>
             </div><!-- #site-generator-wrapper -->
             <br>
         </footer>
        </div><!-- .container -->
       
    <!-- JavaScript -->    
    <script src="<?=site_url('utils/js/bootstrap.js') ?>"></script>
    <script src="<?=site_url('utils/js/classie.js') ?>"></script>
    <script src="<?=site_url('utils/js/uisearch.js') ?>"></script>
    <script src="<?=site_url('utils/js/jquery.carouFredSel-6.2.1-packed.js') ?>"></script>
    <script>
        $(function() {
            $('#foo').carouFredSel({
                responsive: true,
                width: 'auto',
                prev: '#prev',
                next: '#next',
                auto:true,
                items: {
                    width: 130,
                    height: 'auto',
                    visible: {
                        min: 1,
                        max: 7,
                            }
                        }   
        });
        });
    </script>
    <script>
            new UISearch( document.getElementById('sb') );
    </script>
    <script src="<?=site_url('utils/js/galleria-1.3.5.min.js') ?>"></script>
    <script>
    // Load the classic theme
    Galleria.loadTheme('<?=site_url("utils/js/galleria.classic.min.js") ?>');
    // Initialize Galleria
    Galleria.run('#galleria');
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("ul#select>li").on("click","a",function (event) {
                debugger;
                $(this).toggleClass("picked");
            });

        });
    </script>
</body>

</html>